<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link>
    <script></script>
    <style>


        /*选择器
 .top 类选择器
 #top id选择器
 div  元素选择器
 .top > p 子代选择器
 .top  p 后代选择器
 .top + div 相邻兄弟选择器
  .top ~ p 通用兄弟选择器
  兄弟选择器 不包括之前的元素
  * 通用选择器 *代表所有选择器
    .body > div > div:nth-child(2) 伪类选择器
        */
        /*.top ~ div {*/
        /*display: flex;*/
        /*justify-content: center;*/
        /*background-color: brown;*/
        /*border: 1px solid rebeccapurple;*/
        /*}*/

        /*能不能通过某一个div得到其他div*/
        /*    idea 自动对齐 快捷键  ctrl+alt+L
          eclipse     ctrl+shift+f*/

    </style>
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/commonf.js"></script>
    <script src="../js/home.js"></script>
</head>
<body class="body">
<!--页面命名：看见名字知道意思-->
<!--能不能写一个公用的html-->
<div>
    <div id="top">
    </div>
    <div class="middle">
        <div>
            <div>
                <div class="title">较新动态</div>
                <div class="news">
                    <div><img src="../img/m331.jpg" height="190" width="268"/></div>
                    <div id="news">

                    </div>
                </div>
            </div>
            <div>
                <div class="title">产品展示</div>
                <div class="product">
                    <div>
                        <div><img src="../img/duojiaoouding.jpg" height="300" width="300"/></div>
                        <div>豆角藕丁</div>
                        <div>豆角，藕丁，油，味精，醋，花椒，胡椒</div>
                    </div>
                    <div>
                        <div><img src="../img/duojiaoouding.jpg" height="300" width="300"/></div>
                        <div>豆角藕丁</div>
                        <div>豆角，藕丁，油，味精，醋，花椒，胡椒</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="foot"></div>
</div>
</body>
</html>
<!--<script src="js/jq/jquery-3.2.1.min.js"></script>-->
<!--<script type="text/javascript">-->
<!--    //在js中引入-->
<!--    $(document).ready(function () {-->
<!--        $('#top').load('top.html');-->
<!--        $('#foot').load('foot.html');-->
<!--    });-->
<!--</script>-->